import {DimensionTarget} from '@/api/myPerformance'
import {TargetWeight} from '@/components/input/targetWeight'
import {CnMediumSpan, CnNormalSpan} from '@/components/text'
import {unReplaceBreak} from '@/libs/toolkit'
import {PropType,reactive, toRefs, ref, defineComponent, watch, computed,onMounted} from 'vue'
import {PhoneScoreSelfPmTarget} from '..'

const PhoneTargetBlock = defineComponent({
  name: 'PhoneTargetBlock',
  props: {
    target: {
      type: Object as PropType<PhoneScoreSelfPmTarget>
    },
    title: {
      type: String
    }
  },
  emits: {
    'update:target': (data: PhoneScoreSelfPmTarget): boolean => true,
    edit: (data: PhoneScoreSelfPmTarget): boolean => true,
    delete: (data: PhoneScoreSelfPmTarget): boolean => true
  },
  setup(props, {emit, slots}) {
    let target = ref<PhoneScoreSelfPmTarget | undefined>(undefined)

    let targetName = computed(() => props.target?.pmTargetName)
    let targetStand = computed(() =>
      JSON.parse(JSON.stringify(unReplaceBreak(props.target?.pmTargetStand)))
    )

    watch(
      () => props.target,
      n => {
        target.value = n
      },
      {deep: true, immediate: true}
    )

    onMounted(() => {})

    return () => (
      <div class='w-full flex flex-col'>
        <div class='w-full px-16 flex items-center justify-between'>
          <CnNormalSpan>{props.title}</CnNormalSpan>
          <div>{slots.navUtils?.()}</div>
        </div>
        <div class='w-full bg-white px-12 flex flex-col gap-y-8 py-12'>
          <div class='w-full flex flex-wrap gap-x-16'>
            <CnMediumSpan>指标名称</CnMediumSpan>
            <CnNormalSpan
              style={{
                whiteSpace: 'break-spaces',
                fontSize: '12px'
              }}
            >
              {targetName.value}
            </CnNormalSpan>
          </div>
          <div class='w-full flex flex-wrap gap-x-16 gap-y-8'>
            <CnMediumSpan>考核标准</CnMediumSpan>
            <CnNormalSpan
              style={{
                whiteSpace: 'break-spaces',
                fontSize: '12px'
              }}
            >
              {targetStand.value}
            </CnNormalSpan>
          </div>

          <div class='w-full flex flex-wrap gap-x-16 gap-y-8'>
            <CnMediumSpan>权重(%)</CnMediumSpan>
            <CnNormalSpan
              style={{
                whiteSpace: 'break-spaces',
                fontSize: '12px'
              }}
            >
              {props.target?.pmTargetWeight}
            </CnNormalSpan>
          </div>

          {target.value
            ? [
                <div class='w-full flex flex-wrap gap-x-16 gap-y-8'>
                  <CnMediumSpan>评分</CnMediumSpan>
                  <TargetWeight
                    v-model={[target.value.score, 'value']}
                    showUnit={false}
                  ></TargetWeight>
                </div>,
                <div class='w-full flex flex-wrap gap-x-16 gap-y-8'>
                  <CnMediumSpan>评分说明</CnMediumSpan>
                  <a-textarea
                    v-model={[target.value.scoreContent, 'value']}
                    class='rounded-4'
                    rows={2}
                  ></a-textarea>
                </div>
              ]
            : null}
        </div>
      </div>
    )
  }
})

export default PhoneTargetBlock
